<template>
  <div class="buildMap">
    <div id="allmap"></div>
    <div class="project-content">
      <div class="content-left">
        <p>
          在建项目
          <span class="info-num"> {{projectData.project_total}} </span>个
        </p>
        <p>
          参与单位
          <span class="info-num"> {{projectData.company_total}} </span>个
        </p>
      </div>
      <div class="content-right">
        <p>
          建筑面积
          <span class="info-num"> {{projectData.area_total}} </span>万㎡
        </p>
        <p>
          构件总量
          <span class="info-num"> {{projectData.comp_total}} </span>个
        </p>
      </div>
    </div>
    <div class="icon">
      <!-- <td>
          <img src="/static/img/icon.png" alt srcset />
        </td>
        <td>
          <span>项目位置</span>
      </td>-->
      <span>
        项目位置
        <img src="/static/img/icon.png" alt srcset class="icon-img" />
      </span>
      <span>
        构件厂位置
        <img src="/static/img/icon1.png" alt srcset class="icon-img" />
      </span>
      <!-- <td>
          <img src="./static/img/icon1.png" alt srcset />
        </td>
        <td>
          <span>构件厂位置</span>
        </td>
      </tr>
      </tbody>-->
    </div>
  </div>
</template>
<script>
import { mapStyle } from "@/assets/json/mapStyle";
import { elecSandTableApi } from "@/services/WorkCenter";
export default {
  props: {
    mapStyle: Object
  },
  data() {
    return {
      mapPointData: [],
      projectData:{}
    };
  },
  methods: {
    getMapData() {
      elecSandTableApi
        .getMapPointData()
        .then(res => {
          this.mapPointData = res.data;
          this.initMap();
        })
        .catch(error => {
          console.log(error);
        });
    },
    getProjectData() {
      elecSandTableApi
        .getProjectData()
        .then(res => {
          // this.mapPointData = res.data;
          // console.log(this.mapPointData);
          // this.initMap();
          if(res.data){
            this.projectData=res.data
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    initMap() {
      var map = new BMap.Map("allmap"); // 创建Map实例
      map.centerAndZoom(new BMap.Point(119.606619, 30), 8);
      map.setCurrentCity("杭州");
      //添加地图类型控件
      // map.addControl(
      //   new BMap.MapTypeControl({
      //     mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
      //   })
      // );
      map.setMapStyle({
        style: "midnight",
        styleJson: this.mapStyle
      });
      map.enableScrollWheelZoom(true);
      for (let i = 0; i < this.mapPointData.project_coordinate.length; i++) {
        console.log(1);
        let point = new BMap.Point(
          this.mapPointData.project_coordinate[i].lng,
          this.mapPointData.project_coordinate[i].lat
        );
        let icon = new BMap.Icon(
          "/static/img/icon.png",
          new BMap.Size(20, 32),
          {
            anchor: new BMap.Size(10, 30)
          }
        );
        let marker = new BMap.Marker(point, {
          icon: icon
        }); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
      }
      for (let i = 0; i < this.mapPointData.factory_coordinate.length; i++) {
        let point = new BMap.Point(
          this.mapPointData.factory_coordinate[i].lng,
          this.mapPointData.factory_coordinate[i].lat
        );
        let icon = new BMap.Icon(
          "/static/img/icon1.png",
          new BMap.Size(20, 32),
          {
            anchor: new BMap.Size(10, 30)
          }
        );
        let marker = new BMap.Marker(point, {
          icon: icon
        }); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
      }
    }
  },
  mounted() {
    this.getMapData();
    this.getProjectData();
  }
};
</script>
<style lang="scss" scoped>
/deep/ .anchorBL {
  display: none;
}
.buildMap {
  width: 100%;
  height: 100%;
  position: relative;
  .project-content {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    color: #e6e6e6;
    width: 100%;
    margin-top: 20px;
    .content-left {
      position: absolute;
      left: 20px;
      top: 0;
    }
    .content-right {
      position: absolute;
      right: 20px;
      top: 0;
    }
    .info-num {
      color: #ffa201;
      font-size: 30px;
    }
  }
  .icon {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: #e6e6e6;
    font-size: 16px;
    .icon-img {
      width: 20px;
      height: 30px;
    }
  }
  #allmap {
    height: 100%;
    width: 100%;
    border-radius: 30px;
  }
}
</style>